import { getNowFormatDate } from '@/utils/time';
import { FieldTimeOutlined, PlusCircleOutlined } from '@ant-design/icons';
import {
  Badge,
  Button,
  Card,
  Col,
  Form,
  message,
  Popconfirm,
  Row,
  Table,
  Tag,
  notification,
} from 'antd';
import React, { Component } from 'react';
import { connect } from 'umi';
import HanderTime from './HanderTime';
import styles from './HomeHander.less';
import Alarm from '@/components/alarmManage/alarmModel';
import { Decoration5 } from '@jiaminghi/data-view-react';

class HomeHander extends Component {
  constructor(props) {
    super(props);
  }
  play() {
    notification.error({
      message: '发现异常情况，请处理',
      duration: 0,
      top: 100,
      description: (
        <>
          <p>出现警报</p>
          <audio type="audio/flac" src="./assets/mp3/jingbao.mp3" autoPlay={true} loop />
        </>
      ),
      onClick: () => {
        console.log('Notification Clicked!');
      },
    });
  }

  //请求设备器table表数据
  handleRefreshData() {
    let formData = {};
    try {
      const getFormData = this.formRef.current.getFieldsValue();
      formData = { ...getFormData };
    } catch (e) {
      formData = undefined;
    }

    // 获取表格数据
    const { dispatch } = this.props;

    dispatch({
      type: 'alarmManage/changeLoadingStatus',
    });
    if (dispatch) {
      dispatch({
        type: 'alarmManage/getData',
        payload: formData ? { formData } : {},
      });
    }
  }

  handleCancel() {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'alarmManage/changeModelVisibleAndCloseModel',
      });
  }

  //新增/修改Model
  changeModel(type = 'add', data = {}) {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'alarmManage/changeModalVisibleAndSetValue',
        payload:
          type === 'update'
            ? {
                type,
                data,
              }
            : {
                type,
              },
      });
  }
  submitalarmInfo(type = 'add', values) {
    const { dispatch } = this.props;
    dispatch &&
      dispatch({
        type: 'alarmManage/submitMonitorInfo',
        payload: {
          type,
          formData: {
            ...values,
            // address: values.address.join('/'),
          },
        },
        callback: (res) => {
          if (res.code == 200) {
            message.success(`${type === 'add' ? '添加' : '修改'}成功`);
            this.handleCancel();
            this.handleRefreshData(); // 刷新列表
          } else {
            message.error(res.message);
          }
        },
      });
  }
  render() {
    const { visible, optiontype, alarmDetail } = this.props;
    return (
      <div className={styles.HomeHander} style={{ width: '100%' }}>
        <Row style={{ textAlign: 'center' }}>
          <Col span={7} className={styles.HanderLeft}>
            <HanderTime />
          </Col>
          <Col span={10} className={styles.HanderCneter}>
            水 质 监 测 预 警 平 台
          </Col>

          <Col span={7} className={styles.HanderRight}>
            {/* <Button
              type="primary"
              htmlType="button"
              ghost
              style={{ float: 'right', marginRight: '5%' }}
              onClick={() => {
                this.changeModel();
              }}
            >
              <PlusCircleOutlined />
              手动添加污染物量
            </Button>
            <Button
              type="primary"
              onClick={() => {
                this.play();
              }}
              ghost
            >
              发出警报
            </Button> */}
          </Col>
        </Row>
        <Alarm
          visible={visible}
          optiontype={optiontype}
          alarmDetail={alarmDetail}
          handleSumbit={(type, values) => {
            this.submitalarmInfo(type, values);
          }}
          centered
        />
      </div>
    );
  }
}

export default connect(
  ({ global, alarmManage }) => ({
    audioCurrent: global.audioCurrent,
    visible: alarmManage.visible,
    optiontype: alarmManage.optiontype,
    alarmDetail: alarmManage.alarmDetail,
  }),
  (dispatch) => {
    return { dispatch };
  },
  null,
  { forwardRef: true },
)(HomeHander);
